<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        /***
         *
            Blob对象表示一个不可变，原始数据的类文件对象，如果要从其他非Blob对象和结构构建一个Blob，需要使用Blob()构造函数，
            如果要获取一个blob数据的子集blob需要使用Blob.slice()方法
            1. 构造函数
            Blob(blobParts[, options])  返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
            2. 属性
            Blob.size =>    Blob对象中所包含数据的大小（字节）
            Blob.type =>    一个字符串，表明该 Blob 对象所包含数据的 MIME 类型。如果类型未知，则该值为空字符串。
            3. 方法
            Blob.slice([start[, end[, contentType]]]) =>    Blob.slice([start[, end[, contentType]]])

            作用：
            1. 可以获取某个文件内容或后台返回的文件(需要设置响应类型为Blob)，再通过createObjectURL方法，变成一个文件地址，实现本地文件预览
            2. 前端下载后台返回的文件时，文件为文件流或者二进制时，可以使用Blob方法，变成一个文件地址，然后进行下载功能(需要设置响应类型为Blob)。
                - 使用时第二个参数的文件类型要指定

            FileReader
            FileReader对象允许Web应用程序异步读取存储在计算机上文件的内容，使用file或Blob对象指定要读取的文件或数据
            1. 构造函数
            new FileReader();
            2. 属性
            FileReader.error  当一个文件读取错误时
            FileReader.readState
                0 还没有加载数据
                1 正在加载数据
                2 完成加载数据
            FileReader.result  当文件完全读取完成后
            3. 事件
            FileReader.onabort  在读取时中断的时候触发
            FileReader.error  在发生错误时
            FileReader.onload   在读取完成后
            FileReader.onloadstart  在刚开始读取的时候
            FileReader.onloadend   在读取结束时(要么成功要么失败)
            FileReader.onprogress  在读取的过程中
            4. 方法
            FileReader.readAsDataUrl() 开始读取指定Blob中的内容，一旦完成，result属性中包含一个data:URL格式的Base64字符串来表示所读取的文件内容
            FileReader.readAsBinaryString() 开始读取指定Blob中的内容，一旦完成，result属性中将包含所读取文件的原始二进制数据。
            FileReader.readAsText() 开始读取指定Blob中的内容，一旦完成，result属性中将包含一个字符串来表示所读文件的内容
            FileReader.abort() 中止读取操作，在返回时readState属性为2
            FileReader.readAsArrayBuffer() 开始读取指定的Blob文件，一旦完成，result属性中保存的将是读取文件的ArrayBuffer数据对象
            作用：实现文件下载
        */
        let debug = {
            hello: "world"
        };
        let blob = new Blob([JSON.stringify(debug, null, 2)], {type: 'application/json'});
        console.log(blob);
        //var typedArray = GetTheTypedArraySomehow();
        // let blob = new Blob([debug.hello], {type: 'application/octet-stream'}); // 传入一个合适的 MIME 类型
        // let url = URL.createObjectURL(blob);
        // console.log(url)

        /*Blob作用1【实现文件预览(本地文件后台返的文件)】*/
        /**
         // 本地
        const blob = new Blob([file.file], {type: 'application/pdf'});
        this.signFileUrl = URL.createObjectURL(blob); // 将生成的地址赋值给src的属性
        // 后台请求ajax 需要设置响应类型为Blob，{responseType: "blob"}

        */

        /*Blob作用2【ajax后下载({responseType: "blob"})】*/
        /**
         function  downloadFile() {
            const blob = new Blob([result]);
            const fileName = '文件名称.xlsx';
            const elink = document.createElement('a');
            elink.download = fileName;
            elink.style.display = 'none';
            elink.href = URL.createObjectURL(blob);
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href); // 释放URL 对象
            document.body.removeChild(elink);
        }
        * */
        /*FileReader【实现下载({responseType: "blob"})】*/
        /**
         xhr.onload = function (result) {
            if (this.status === 200) {
                var blob = this.response;
                var reader = new FileReader();
                reader.readAsDataURL(blob);  // 转换为base64，可以直接放入a表情href
                reader.onload = function (e) {
                 // 转换完成，创建一个a标签用于下载
                 var a = document.createElement('a');
                 a.download = templateName + '.xlsx';//xls
                 console.log(e);
                 a.href = e.target.result;
                 $("body").append(a);
                 a.click(); // 修复firefox中无法触发click
                 $(a).remove();
                }
            }
         };

         */
        /*根据后台返回的文件地址，进行下载文件，有时候在浏览器上本想下载却成了文件预览*/
        /**
        function downloadPdf() {
            let request = new XMLHttpRequest();
            request.responseType = 'blob';
            request.open('GET', this.signFileUrl);
            request.onload = function() {
                let url = window.URL.createObjectURL(this.response);
                let a = document.createElement('a');
                document.body.appendChild(a);
                a.href = url;
                a.download = '签名文件.pdf';
                a.click();
            }
            request.send();
        }
        */

    </script>
</body>

</html>
